<script setup lang="ts">
import { computed, ref } from "vue";
import { useRoute, useRouter } from "vue-router"; // 添加 useRouter 导入
import { useUserInfoStore } from "../stores/userInfo";


// 修改导入语句，只导入新增的图标
import {ArrowDown, DataAnalysis} from '@element-plus/icons-vue';
const router = useRouter(); // 添加路由实例
const userInfoStore = useUserInfoStore();
const showRoleSelector = ref(false);

// 菜单项类型定义
interface MenuItem {
  path: string;
  name?: string;
  label: string;
  icon: string;
  children?: MenuItem[];
}

// 根据当前角色生成菜单列表
const list = computed<MenuItem[]>(() => {
  const baseMenu: MenuItem[] = [
    { path: "/index", name: "index", label: "首页", icon: "HomeFilled" },
    {
      path: "/userInfo",
      icon: "UserFilled",
      label: "个人中心",
      children: [
        { path: "/user/info", name: "userinfo", label: "基本资料", icon: "UserFilled" },
        { path: "/user/resetPassword", name: "resetPassword", label: "重置密码", icon: "EditPen" }
      ]
    }
  ];

  // 超级管理员菜单 (role === 2)
  if (userInfoStore.currentRole === 2) {
    return [
      ...baseMenu,
      { path: "/admin/manage", name: "adminManage", label: "管理员管理", icon: "Setting" },
      { path: "/user/list", name: "user", label: "用户管理", icon: "User" },
      { path: "/booking/manage", name: "booking", label: "预约审核", icon: "Document" },
      {
        path: "/house",
        icon: "House",
        label: "会议室管理",
        children: [
          { path: "/house/list", name: "houseList", label: "会议室信息列表", icon: "List" },
          { path: "/house", name: "houseAdd", label: "会议室信息管理", icon: "Plus" },
          { path: "/booking/schedule", name: "BookingSchedule", label: "会议排期查询", icon: "Calendar" },
        ]
      },
      { path: "/blacklist/list", name: "blacklist", label: "黑名单管理", icon: "Warning" },
      { path: "/log/list", name: "log", label: "操作日志", icon: "Notebook" },
      { path: "/booking/device-report/manage", name: "DeviceReportManage", label: "设备报修处理", icon: "Tools" },
      { path: "/statistics-report", name: 'StatisticsReport', label: '统计分析与报表', icon: DataAnalysis }
    ];
  }

  // 管理员菜单 (role === 1)
  if (userInfoStore.currentRole === 1) {
    return [
      ...baseMenu,
      { path: "/user/list", name: "user", label: "用户管理", icon: "User" },
      { path: "/booking/manage", name: "booking", label: "预约审核", icon: "Document" },
      {
        path: "/house",
        icon: "House",
        label: "会议室管理",
        children: [
          { path: "/house/list", name: "houseList", label: "会议室信息列表", icon: "List" },
          { path: "/house", name: "houseAdd", label: "会议室信息管理", icon: "Plus" },
          { path: "/booking/schedule", name: "BookingSchedule", label: "会议排期查询", icon: "Calendar" },
        ]
      },
      { path: "/blacklist/list", name: "blacklist", label: "黑名单管理", icon: "Warning" },
      { path: "/log/list", name: "log", label: "操作日志", icon: "Notebook" },
      { path: "/booking/device-report/manage", name: "DeviceReportManage", label: "设备报修处理", icon: "Tools" },
      { path: '/statistics-report', name: 'StatisticsReport', label: '统计分析与报表', icon: DataAnalysis }
    ];
  }

  // 成员菜单 (role === 0)
  return [
    ...baseMenu,
    {
      path: "/booking",
      label: "会议室预约",
      icon: "Calendar",
      children: [
        { path: "/booking/create", name: "BookingCreate", label: "新建预约", icon: "Calendar" },
        { path: "/booking/my", name: "MyBookings", label: "我的预约", icon: "Document" },
        { path: "/booking/schedule", name: "BookingSchedule", label: "会议排期查询", icon: "Calendar" },
      ]
    },
    { path: "/blacklist/appeal", name: "BlacklistAppeal", label: "黑名单申诉", icon: "Warning" },
    { path: "/booking/device-report", name: "DeviceReport", label: "设备报修", icon: "Tools" },
    { path: '/statistics-report', name: 'StatisticsReport', label: '统计分析与报表', icon: DataAnalysis }
  ];
});

// 拆分无子菜单与有子菜单项
const noChildren = computed(() => list.value.filter(item => !item.children));
const hasChildren = computed(() => list.value.filter(item => item.children));

// 获取当前路由，用于菜单高亮
const route = useRoute();
const activeMenu = computed(() => route.path);

// 修改角色切换方法 - 超级管理员和管理员均可使用
const handleRoleChange = (role) => {
  if (userInfoStore.currentRole === 2 || userInfoStore.currentRole === 1) { // 超级管理员和管理员可以切换角色
    userInfoStore.switchRole(role);
    showRoleSelector.value = false;

    // 根据新角色重定向到对应页面
    if (role === 2) {
      router.push('/admin/manage');
    } else if (role === 1) {
      router.push('/user/list');
    } else {
      router.push('/booking/create');
    }
  }
};
</script>

<template>
  <el-aside width="200px" class="el-aside">
    <!-- 用户信息区域 -->
    <div class="user-info">
      <div class="user-avatar">
        <el-avatar :size="40" :src="userInfoStore.userInfo.avatar || ''" />
      </div>
      <div class="user-details">
        <div class="username">{{ userInfoStore.userInfo.username }}</div>

        <!-- 超级管理员和管理员显示角色切换下拉菜单 -->
        <div class="role-selector" v-if="userInfoStore.currentRole === 2 || userInfoStore.currentRole === 1">
          <el-dropdown trigger="click" @visible-change="v => showRoleSelector = v">
            <span class="current-role">
              {{
                userInfoStore.currentRole === 2 ? '超级管理员' :
                    userInfoStore.currentRole === 1 ? '管理员' : '普通用户'
              }}
              <el-icon :class="{ 'rotate-icon': showRoleSelector }"><arrow-down /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-if="userInfoStore.currentRole === 2" @click="handleRoleChange(2)">
                  <span :class="{ active: userInfoStore.currentRole === 2 }">超级管理员视图</span>
                </el-dropdown-item>
                <el-dropdown-item @click="handleRoleChange(1)">
                  <span :class="{ active: userInfoStore.currentRole === 1 }">管理员视图</span>
                </el-dropdown-item>
                <el-dropdown-item @click="handleRoleChange(0)">
                  <span :class="{ active: userInfoStore.currentRole === 0 }">普通用户视图</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>

        <!-- 普通用户显示角色文本 -->
        <div class="role-text" v-else>
          普通用户
        </div>
      </div>
    </div>

    <el-menu
        router
        :default-active="activeMenu"
        background-color="#232323"
        text-color="#fff"
        active-text-color="#ffd04b"
    >
      <!-- 无子菜单项 -->
      <el-menu-item
          v-for="item in noChildren"
          :key="item.path"
          :index="item.path"
      >
        <component :is="item.icon" class="icons" />
        <template #title>{{ item.label }}</template>
      </el-menu-item>

      <!-- 有子菜单项 -->
      <el-sub-menu
          v-for="item in hasChildren"
          :key="item.path"
          :index="item.path"
      >
        <template #title>
          <component :is="item.icon" class="icons" />
          <span>{{ item.label }}</span>
        </template>
        <el-menu-item
            v-for="child in item.children"
            :key="child.path"
            :index="child.path"
        >
          <template #title>{{ child.label }}</template>
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </el-aside>
</template>

<style scoped>
.el-aside {
  background-color: #232323;
  height: 100vh;
}
.el-aside__logo {
  height: 60px;
  margin: 16px;
  background: #1f2d3d;
  border-radius: 4px;
}
.el-menu-item,
.el-sub-menu__title {
  display: flex !important;
  align-items: center;
  padding: 12px 20px !important;
}
.icons {
  font-size: 20px;
  width: 20px;
  height: 20px;
  color: #bfbfbf;
  margin-right: 12px;
}
.el-menu-item.is-active .icons,
.el-sub-menu__title.is-active .icons {
  color: #ffd04b;
}
.el-menu-item:hover .icons,
.el-sub-menu__title:hover .icons {
  color: #ffffff;
}
.el-menu-item span,
.el-sub-menu__title span {
  flex: 1;
  font-size: 14px;
}

/* 添加用户信息区域样式 */
.user-info {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #3a3a3a;
}

.user-avatar {
  margin-right: 12px;
}

.user-details {
  flex: 1;
}

.username {
  color: #fff;
  font-weight: 500;
  margin-bottom: 4px;
}

.role-selector {
  cursor: pointer;
}

.current-role {
  color: #ffd04b;
  display: flex;
  align-items: center;
  font-size: 12px;
}

.current-role .el-icon {
  margin-left: 4px;
  transition: transform 0.3s;
}

.rotate-icon {
  transform: rotate(180deg);
}

.el-dropdown-menu__item span.active {
  color: #ffd04b;
  font-weight: bold;
}

.current-role {
  color: #c351d0; /* 超级管理员使用不同颜色 */
  display: flex;
  align-items: center;
  font-size: 12px;
}

/* 管理员角色文本颜色 */
.user-info .role-selector .current-role[data-role="admin"] {
  color: #409EFF;
}
</style>